<template>
	<view class="profile-edit-container">
		<view class="avatar-section">
			<view class="avatar-wrapper" @click="chooseAvatar">
				<image :src="userInfo.pic || '/static/default-avatar.png'" mode="aspectFill" class="avatar"></image>
				<view class="avatar-edit-icon">
					<u-icon name="camera-fill" color="#fff" size="20"></u-icon>
				</view>
			</view>
			<text class="avatar-tip">点击更换头像</text>
		</view>

		<view class="form-section">
			<view class="form-item">
				<text class="label">昵称</text>
				<input type="text" v-model="userInfo.nickName" placeholder="请输入昵称" class="input" />
			</view>

			<view class="form-item">
				<text class="label">性别</text>
				<picker @change="onSexChange" :value="sexIndex" :range="sexOptions" class="picker">
					<view class="picker-text">{{sexOptions[sexIndex]}}</view>
				</picker>
			</view>

			<view class="form-item">
				<text class="label">地区</text>
				<input type="text" v-model="userInfo.region" placeholder="请输入地区" class="input" />
			</view>

			<view class="form-item">
				<text class="label">简介</text>
				<textarea v-model="userInfo.bio" placeholder="请输入个人简介" class="textarea" maxlength="255" />
			</view>
		</view>

		<button class="save-btn" @click="saveProfile">保存</button>
	</view>
</template>

<script>
	import { getUserInfo, updateUserInfo, uploadFile } from '@/utils/api/modules/user.js'
	
	export default {
		data() {
			return {
				userInfo: {
					pic: '',
					nickName: '',
					sex: 'male', // 默认值设为male
					region: '',
					bio: ''
				},
				sexOptions: ['男', '女', '其他'],
				sexIndex: 0
			}
		},
		onLoad() {
			this.getUserInfo()
		},
		methods: {
			// 获取用户信息
			async getUserInfo() {
				try {
					const userId = uni.getStorageSync('user').id
					const res = await getUserInfo(userId)
					if (res.statusCode == 200) {
						this.userInfo = res.data
						// 根据后端返回的sex值设置sexIndex
						this.sexIndex = this.userInfo.sex === 'male' ? 0 : 
									   this.userInfo.sex === 'female' ? 1 : 2
					}
				} catch (e) {
					uni.showToast({
						title: '获取用户信息失败',
						icon: 'none'
					})
				}
			},
			
			// 选择头像（保持不变）
			chooseAvatar() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: async (res) => {
						const tempFilePath = res.tempFilePaths[0]
						
						uni.getFileInfo({
							filePath: tempFilePath,
							success: async (fileInfo) => {
								if (fileInfo.size > 10 * 1024 * 1024) {
									uni.showToast({
										title: '图片大小不能超过10MB',
										icon: 'none'
									})
									return
								}
								
								try {
									const uploadRes = await uploadFile(tempFilePath)
									this.userInfo.pic = uploadRes.url
									uni.showToast({
										title: '上传成功',
										icon: 'success'
									})
								} catch (e) {
									uni.showToast({
										title: e.message || '上传头像失败',
										icon: 'none'
									})
								}
							},
							fail: () => {
								uni.showToast({
									title: '获取文件信息失败',
									icon: 'none'
								})
							}
						})
					}
				})
			},
			
			// 性别选择改变
			onSexChange(e) {
				this.sexIndex = e.detail.value
				// 直接映射为英文值
				this.userInfo.sex = this.sexIndex === 0 ? 'male' : 
								   this.sexIndex === 1 ? 'female' : 'other'
			},
			
			// 保存个人资料
			async saveProfile() {
				try {
					const userId = uni.getStorageSync('user').id
					const params = {
						id: userId,
						bio: this.userInfo.bio,
						nickName: this.userInfo.nickName,
						pic: this.userInfo.pic,
						region: this.userInfo.region,
						sex: this.userInfo.sex // 这里已经是英文值
					}
					const res = await updateUserInfo(params)
					
					if (res.statusCode == 200) {
						// 更新本地存储的用户信息
						const user = uni.getStorageSync('user')
						user.pic = this.userInfo.pic
						user.nickName = this.userInfo.nickName
						user.sex = this.userInfo.sex // 存储英文值
						user.region = this.userInfo.region
						user.bio = this.userInfo.bio
						uni.setStorageSync('user', user)
						
						uni.showToast({
							title: '保存成功',
							icon: 'success'
						}).then(()=>{
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/mine/mine'
								});
								window.location.reload()
							}, 1000)
						})
						
						
					} else {
						uni.showToast({
							title: res.message || '保存失败',
							icon: 'none'
						})
					}
				} catch (e) {
					uni.showToast({
						title: '保存失败',
						icon: 'none'
					})
				}
			}
		}
	}
</script>
<style>
	.profile-edit-container {
		min-height: 100vh;
		background: #f7f7f7;
		padding: 30rpx;
	}
	
	.avatar-section {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40rpx 0;
	}
	
	.avatar-wrapper {
		position: relative;
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		overflow: hidden;
	}
	
	.avatar {
		width: 100%;
		height: 100%;
	}
	
	.avatar-edit-icon {
		position: absolute;
		right: 0;
		bottom: 0;
		background: rgba(0,0,0,0.5);
		padding: 10rpx;
		border-radius: 50%;
	}
	
	.avatar-tip {
		font-size: 24rpx;
		color: #999;
		margin-top: 20rpx;
	}
	
	.form-section {
		background: #fff;
		border-radius: 12rpx;
		padding: 0 30rpx;
		margin-top: 30rpx;
	}
	
	.form-item {
		padding: 30rpx 0;
		border-bottom: 1rpx solid #f5f5f5;
	}
	
	.form-item:last-child {
		border-bottom: none;
	}
	
	.label {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 20rpx;
		display: block;
	}
	
	.input {
		height: 80rpx;
		font-size: 28rpx;
	}
	
	.picker {
		height: 80rpx;
		line-height: 80rpx;
	}
	
	.picker-text {
		font-size: 28rpx;
		color: #333;
	}
	
	.textarea {
		width: 100%;
		height: 200rpx;
		font-size: 28rpx;
		line-height: 1.5;
	}
	
	.save-btn {
		margin-top: 60rpx;
		background: #54bcbd;
		color: #fff;
		border: none;
		border-radius: 8rpx;
		padding: 20rpx 0;
		font-size: 28rpx;
	}
</style> 